<template>
  <div class="com-radio" :class="{'on':model==value,'disabled':disabled}" @click="updateVal">
    <input type="radio" ref="radio" :value="value" :disabled="disabled">
    <div class="com-radio-icon"></div>
    <div class="com-radio-label" v-if="label">{{label}}</div>
  </div>
</template>
<script>
export default {
  name:'ui-radio',
  model: {
    prop: 'model',
    event: 'change'
  },
  props:{
    value:{},
    model:{//这里的model指的是上面定义的v-model的prop
      type:[String,Number],
    },
     checked:{//是否默认选中
      type:Boolean,
      default:false
    },
    disabled:{//是否禁用
      type:Boolean,
      default:false
    },
    label:String
  },
  mounted(){//当dom渲染完成,判断组件是否默认选中
    if(this.checked===true)
      this.updateVal();
  },
  methods:{
    updateVal(){//当用户点击radio时,触发change事件更新v-model
      let val = this.$refs.radio.value;
      if(!isNaN(val)){
        val = Number(val);
      }
      this.$emit('change',val);
    }
  }
}
</script>
<style lang="less" scoped>
.com-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  input {
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    width:100%;
    height:100%;
  }
  &.on {
    .com-radio-icon {
      border-color:#2086f9;
      &::after {
        background-color:#2086f9;
      }
    }

    .com-radio-label {
      color:#2086f9;
    }
  }
  .com-radio-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width:36px;
    height:36px;
    border-radius: 50%;
    border:1px solid #c1c5cf;
    &::after {
      content:'';
      width:16px;
      height:16px;
      border-radius: 50%;
    }
  }
  .com-radio-label {
    margin-left:26px;
    font-size: 28px;
    color:#292929;
  }
}
</style>

